<div class="clr-row" *ngIf="loading">
  <div class="clr-col-lg-12 white-div"></div>
  <div class="clr-col-lg-12 loading-div center">
    <span class="spinner spinner-lg loading">
      Loading...
    </span>
  </div>
</div>
<div class="clr-row" *ngIf="!loading" [ngClass]="{'div-disabled' : clusters.length === 0 && showWindow}">
  <div class="clr-col-lg-6 clr-col-12">
    <p class="p7 prompt">异常日志每小时更新一次 其他信息每5分钟更新一次</p>
  </div>
  <div class="clr-col-lg-6 clr-col-12">
    <div style="float: right">
      <!--      <div class="clr-select-wrapper">-->
      <!--        <select class="clr-select" [(ngModel)]="dashboardSearch.dateLimit">-->
      <!--          <option value="1">过去一天</option>-->
      <!--          <option value="7">过去一周</option>-->
      <!--          <option value="30">过去一月</option>-->
      <!--        </select>-->
      <!--      </div>-->
      <div class="clr-select-wrapper">
        <select class="clr-select" [(ngModel)]="dashboardSearch.item"(ngModelChange)="changeItem()">
          <option value="all">所有项目</option>
          <option *ngFor="let i of items" value="{{i.name}}">{{i.name}}</option>
        </select>
      </div>
      &nbsp;&nbsp;
      <div class="clr-select-wrapper">
        <select class="clr-select" [(ngModel)]="dashboardSearch.cluster" (ngModelChange)="search()">
          <option value="all">所有集群</option>
          <option *ngFor="let c of selectClusters" value="{{c.name}}">{{c.name}}</option>
        </select>
      </div>
      &nbsp;
      <button class="btn btn-link" (click)="refresh()">
        <clr-icon shape="refresh"></clr-icon>
      </button>
    </div>
  </div>
</div>
<div class="clr-row" *ngIf="!loading && clusters.length === 0 && showWindow">
  <div class="clr-col-sm-12 center">
    <div class="card card-block card-top">
      <clr-icon shape="close" role="none" style="float: right" (click)="showWindow=false"></clr-icon>
      <h2>快速开始</h2>
      <div class="clr-row" style="margin-top: 50px;">
        <div class="clr-col-sm-4 center">
          <img src="assets/images/dashboad_server.svg" class="img-responsive middle" width="88" height="88">
          <p class="card-text"><a href="https://docs.kubeoperator.io/KubeOperator-v2.3/userguide-manual"
                                  target="_blank">在物理机上创建集群</a></p>
        </div>
        <div class="clr-col-sm-4 center">
          <img src="assets/images/dashboard_vmware.svg" class="img-responsive middle" width="88" height="88">
          <p class="card-text"><a href="https://docs.kubeoperator.io/KubeOperator-v2.3/userguide-vsphere"
                                  target="_blank">在vSphere上创建集群</a></p>
        </div>
        <div class="clr-col-sm-4 center">
          <img src="assets/images/dashboard_openstack.svg" class="img-responsive middle" width="88" height="88">
          <p class="card-text"><a href="https://docs.kubeoperator.io/KubeOperator-v2.3/userguide-openstack"
                                  target="_blank">在OpenStack上创建集群</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="clr-row" *ngIf="!loading" [ngClass]="{'div-disabled' : clusters.length === 0 && showWindow}">
  <div class="clr-col-lg-4 clr-col-12">
    <div class="card">
      <div class="card-block card-style">
        <h3 class="card-title">集群状态</h3>
        <table class="table">
          <tr>
            <th>名称</th>
            <th>状态</th>
          </tr>
          <tbody>
          <tr *ngFor="let cluster of clusters">
            <td>{{cluster.name}}</td>
            <td [ngStyle]="{'color':cluster.status | statusColor }">{{cluster.status | status}}</td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="card-footer">
        <a class="btn btn-sm btn-link" style="visibility:hidden;" (click)="toPage('cluster')">详情</a>
      </div>
    </div>
  </div>
  <div class="clr-col-lg-4 clr-col-12">
    <div class="card">
      <div class="card-block card-style">
        <h3 class="card-title">容量信息</h3>
        <div class="clr-col-sm-12 clr-col-12 progress-block">
          <div class="progress-group">
            <div class="clr-row">
              <div class="clr-col-6">CPU使用率 ({{cpuUsage | number: '1.0-2'}}%)</div>
              <div class="clr-col-6 text-right">{{cpuTotal}}核</div>
            </div>
            <div class="progress success" data-displayval="100%">
              <progress class="progress-dashboard" max="100" value="{{cpuUsage}}"></progress>
            </div>
          </div>
        </div>
        <div class="clr-col-sm-12 clr-col-12 progress-block">
          <div class="progress-group">
            <div class="clr-row">
              <div class="clr-col-6">内存使用率 ({{memUsage | number: '1.0-2'}}%)</div>
              <div class="clr-col-6 text-right">{{memTotal | number: '1.0-2' }}G</div>
            </div>
            <div class="progress success" data-displayval="100%">
              <progress class="progress-dashboard" max="100" value="{{memUsage}}"></progress>
            </div>
          </div>
        </div>
        <div class="clr-col-sm-12 clr-col-12 progress-block">
          <div class="progress-group">
            <div class="clr-row">
              <div class="clr-col-6">容器组 ({{containerUsage | number: '1.0-2'}}%)</div>
              <div class="clr-col-6 text-right">{{podCount}}/{{maxPodCount}}</div>
            </div>
            <div class="progress success" data-displayval="100%">
              <progress class="progress-dashboard" max="100" value="{{containerUsage}}"></progress>
            </div>
          </div>
        </div>
      </div>
      <div class="card-footer">
        <a class="btn btn-sm btn-link" (click)="showClusterUsageDetail = true">详情</a>
      </div>
    </div>
  </div>
  <div class="clr-col-lg-4 clr-col-12">
    <div class="card">
      <div class="card-block card-style">
        <h3 class="card-title">统计信息</h3>
        <div class="clr-row">
          <div class="clr-col-lg-5  clr-col-12 count">
            <span><b>{{nodeCount}}</b></span> <br>
            <span><b>{{clusters.length}}</b></span> <br>
            <span><b>{{namespaceCount}}</b></span> <br>
            <span><b>{{deploymentCount}}</b></span> <br>
            <span><b>{{podCount}}</b></span> <br>
            <span><b>{{containerCount}}</b></span> <br>
          </div>
          <div class="clr-col-lg-7 clr-col-12 type-face">
            <span>Nodes</span> <br>
            <span>Clusters</span> <br>
            <span>Namespaces</span> <br>
            <span>Deployments</span> <br>
            <span>Pods</span> <br>
            <span>Containers</span> <br>
          </div>
        </div>
      </div>
      <div class="card-footer">
        <a (click)="toPage('cluster')" style="visibility:hidden;" class="btn btn-sm btn-link">详情</a>
      </div>
    </div>
  </div>
</div>
<div class="clr-row" *ngIf="!loading" [ngClass]="{'div-disabled' : clusters.length === 0 && showWindow}">
  <div class="clr-col-lg-4 clr-col-12">
    <div class="card">
      <div class="card-block card-style">
        <h3 class="card-title">异常日志</h3>
        <table class="table">
          <tr>
            <th>容器名称</th>
            <th>集群</th>
            <th>Error数量</th>
          </tr>
          <tr *ngFor="let elc of errorLokiContainers.slice(0,6)">
            <td>{{elc.name}}</td>
            <td>{{elc.cluster_name}}</td>
            <td>{{elc.error_count}}</td>
          </tr>
        </table>
      </div>
      <div class="card-footer">
        <a class="btn btn-sm btn-link" (click)="showErrorLokiContainerDetail=true">详情</a>
      </div>
    </div>
  </div>
  <div class="clr-col-lg-4 clr-col-12">
    <div class="card">
      <div class="card-block card-style">
        <h3 class="card-title">Pod重启次数</h3>
        <table class="table">
          <tr>
            <th>名称</th>
            <th>集群</th>
            <th>重启次数</th>
          </tr>
          <tr *ngFor="let rp of restartPods.slice(0,6)">
            <td>{{rp.name}}</td>
            <td>{{rp.cluster_name}}</td>
            <td>{{rp.restart_count}}</td>
          </tr>
        </table>
      </div>
      <div class="card-footer">
        <a class="btn btn-sm btn-link" (click)="showPodDetail = true">详情</a>
      </div>
    </div>
  </div>
  <div class="clr-col-lg-4 clr-col-12">
    <div class="card">
      <div class="card-block card-style">
        <h3 class="card-title">异常Pod</h3>
        <table class="table">
          <tr>
            <th>名称</th>
            <th>集群</th>
            <th>状态</th>
          </tr>
          <tr *ngFor="let rp of errorPods.slice(0,6)">
            <td>{{rp.name}}</td>
            <td>{{rp.cluster_name}}</td>
            <td>{{rp.status}}</td>
          </tr>
        </table>
      </div>
      <div class="card-footer">
        <a class="btn btn-sm btn-link" (click)="showErrorPodDetail=true">详情</a>
      </div>
    </div>
  </div>
</div>
<div class="modal" *ngIf="showPodDetail">
  <div class="modal-dialog modal-xl" role="dialog" aria-hidden="true">
    <div class="modal-content">
      <div class="modal-header">
        <button aria-label="Close" class="close" type="button" (click)="showPodDetail=false">
          <clr-icon aria-hidden="true" shape="close"></clr-icon>
        </button>
        <h3 class="modal-title">Pod详情</h3>
      </div>
      <div class="modal-body">
        <clr-datagrid>
          <clr-dg-column>名称</clr-dg-column>
          <clr-dg-column>主机</clr-dg-column>
          <clr-dg-column>集群</clr-dg-column>
          <clr-dg-column>Namespace</clr-dg-column>
          <clr-dg-column>pod ip</clr-dg-column>
          <clr-dg-column>重启次数</clr-dg-column>
          <clr-dg-column>状态</clr-dg-column>
          <clr-dg-row *clrDgItems="let item of restartPods" [clrDgItem]="item">
            <clr-dg-cell>{{item.name}}</clr-dg-cell>
            <clr-dg-cell>{{item.host_name}}</clr-dg-cell>
            <clr-dg-cell>{{item.cluster_name}}</clr-dg-cell>
            <clr-dg-cell>{{item.namespace}}</clr-dg-cell>
            <clr-dg-cell>{{item.pod_ip}}</clr-dg-cell>
            <clr-dg-cell>{{item.restart_count}}</clr-dg-cell>
            <clr-dg-cell>{{item.status}}</clr-dg-cell>
          </clr-dg-row>
        </clr-datagrid>
      </div>
    </div>
  </div>
</div>
<div class="modal" *ngIf="showContainerDetail">
  <div class="modal-dialog modal-lg" role="dialog" aria-hidden="true">
    <div class="modal-content">
      <div class="modal-header">
        <button aria-label="Close" class="close" type="button" (click)="showContainerDetail=false">
          <clr-icon aria-hidden="true" shape="close"></clr-icon>
        </button>
        <h3 class="modal-title">Container详情</h3>
      </div>
      <div class="modal-body">
        <clr-datagrid>
          <clr-dg-column>名称</clr-dg-column>
          <clr-dg-column>Pod</clr-dg-column>
          <clr-dg-column>重启次数</clr-dg-column>
          <clr-dg-column>Ready</clr-dg-column>
          <clr-dg-row *clrDgItems="let item of warnContainers" [clrDgItem]="item">
            <clr-dg-cell>{{item.name}}</clr-dg-cell>
            <clr-dg-cell>{{item.pod_name}}</clr-dg-cell>
            <clr-dg-cell>{{item.restart_count}}</clr-dg-cell>
            <clr-dg-cell>{{item.ready}}</clr-dg-cell>
          </clr-dg-row>
        </clr-datagrid>
      </div>
    </div>
  </div>
</div>
<div class="modal" *ngIf="showClusterUsageDetail">
  <div class="modal-dialog modal-lg" role="dialog" aria-hidden="true">
    <div class="modal-content">
      <div class="modal-header">
        <button aria-label="Close" class="close" type="button" (click)="showClusterUsageDetail=false">
          <clr-icon aria-hidden="true" shape="close"></clr-icon>
        </button>
        <h3 class="modal-title">容量详情</h3>
      </div>
      <div class="modal-body">
        <clr-datagrid>
          <clr-dg-column>名称</clr-dg-column>
          <clr-dg-column>CPU(核)</clr-dg-column>
          <clr-dg-column>CPU使用率(%)</clr-dg-column>
          <clr-dg-column>内存(GB)</clr-dg-column>
          <clr-dg-column>内存使用率(%)</clr-dg-column>
          <clr-dg-row *clrDgItems="let item of nodes" [clrDgItem]="item">
            <clr-dg-cell>{{item.name}}</clr-dg-cell>
            <clr-dg-cell>{{item.cpu}}</clr-dg-cell>
            <clr-dg-cell>{{item.cpu_usage * 100 | number: '1.0-2'}}</clr-dg-cell>
            <clr-dg-cell>{{item.mem | number: '1.0-2'}}</clr-dg-cell>
            <clr-dg-cell>{{item.mem_usage * 100 | number: '1.0-2'}}</clr-dg-cell>
          </clr-dg-row>
        </clr-datagrid>
      </div>
    </div>
  </div>
</div>
<div class="modal" *ngIf="showErrorLokiContainerDetail">
  <div class="modal-dialog modal-lg" role="dialog" aria-hidden="true">
    <div class="modal-content">
      <div class="modal-header">
        <button aria-label="Close" class="close" type="button" (click)="showErrorLokiContainerDetail=false">
          <clr-icon aria-hidden="true" shape="close"></clr-icon>
        </button>
        <h3 class="modal-title">异常详情</h3>
      </div>
      <div class="modal-body">
        <clr-datagrid>
          <clr-dg-column>容器名称</clr-dg-column>
          <clr-dg-column>所属集群</clr-dg-column>
          <clr-dg-column>错误次数</clr-dg-column>
          <clr-dg-column>监控</clr-dg-column>
          <clr-dg-row *clrDgItems="let item of errorLokiContainers" [clrDgItem]="item">
            <clr-dg-cell>{{item.name}}</clr-dg-cell>
            <clr-dg-cell>{{item.cluster_name}}</clr-dg-cell>
            <clr-dg-cell>{{item.error_count}}</clr-dg-cell>
            <clr-dg-cell (click)="toGrafana(item.cluster_name)"><img src="assets/images/grafana.svg" width="15">
            </clr-dg-cell>
          </clr-dg-row>
        </clr-datagrid>
      </div>
    </div>
  </div>
</div>
<div class="modal" *ngIf="showErrorPodDetail">
  <div class="modal-dialog modal-xl" role="dialog" aria-hidden="true">
    <div class="modal-content">
      <div class="modal-header">
        <button aria-label="Close" class="close" type="button" (click)="showErrorPodDetail=false">
          <clr-icon aria-hidden="true" shape="close"></clr-icon>
        </button>
        <h3 class="modal-title">Pod详情</h3>
      </div>
      <div class="modal-body">
        <clr-datagrid>
          <clr-dg-column>名称</clr-dg-column>
          <clr-dg-column>主机</clr-dg-column>
          <clr-dg-column>集群</clr-dg-column>
          <clr-dg-column>Namespace</clr-dg-column>
          <clr-dg-column>pod ip</clr-dg-column>
          <clr-dg-column>重启次数</clr-dg-column>
          <clr-dg-column>状态</clr-dg-column>
          <clr-dg-row *clrDgItems="let item of errorPods" [clrDgItem]="item">
            <clr-dg-cell>{{item.name}}</clr-dg-cell>
            <clr-dg-cell>{{item.host_name}}</clr-dg-cell>
            <clr-dg-cell>{{item.cluster_name}}</clr-dg-cell>
            <clr-dg-cell>{{item.namespace}}</clr-dg-cell>
            <clr-dg-cell>{{item.pod_ip}}</clr-dg-cell>
            <clr-dg-cell>{{item.restart_count}}</clr-dg-cell>
            <clr-dg-cell>{{item.status}}</clr-dg-cell>
          </clr-dg-row>
        </clr-datagrid>
      </div>
    </div>
  </div>
</div>
